<template>
  <div class="uploadFile">
        <el-upload
            :action="state.action"
            list-type="picture-card" :on-success="onSuccess" :limit="limit"  :class="state.hideUpload ? 'hide':''"
            :headers="state.headerObj"  :on-progress="onProgress" :before-upload="beforeUpload"
            :on-remove="onRemove" ref="uploadRef"
            :on-preview="onPreview" :accept="accept"
            :file-list="state.uploadFileList"
            :disabled="disabled"
            :auto-upload="true">
            <template #default>
                <div v-if="disabled" style="cursor: not-allowed; background:#f5f7fa;width:100%;height:100%;">
                  <i   class="el-icon-plus" style=""></i>
                </div>
                <div  v-else class="box">
                    <i  class="el-icon-plus"></i>
                    <span class="text">上传图片</span>
                    <!-- <div class="text"></div> -->
                </div>
            </template>


        </el-upload>
  </div>
</template>
<script>
// vue3 弃用了beforeCreate created
import {getCurrentInstance,ref,reactive,onMounted,onUpdated,onUnmounted} from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import wordIcon from '@/assets/img/word.png'
import pdfIcon from '@/assets/img/pdf.png'
import fileIcon from '@/assets/img/file.png'
import imageIcon from '@/assets/img/image.png'
import videoIcon from '@/assets/img/video.png'
import zipIcon from '@/assets/img/zip.png'
const state = reactive({
  headerObj:{
    token : window.localStorage.getItem('token')
  },
    action:window.localStorage.baseURL+'/api/common/pc_upload',
    hideUpload: false,
    disabled: false,
    dialogVisible: false,
    dialogImageUrl: '',
    files:'',
    uploadFileList:[],
    wordIcon,
    pdfIcon,
    fileIcon,
    imageIcon,
    videoIcon,
    zipIcon,
});


function handleRemove(file) {
        console.log(file);

};
function handlePictureCardPreview(file) {
        console.log(222);
        state.dialogImageUrl = file.url;
        state.dialogVisible = true;
};
function handleDownload(file) {
        console.log(111);
        console.log(file);
};
export default {
  components: {},
  props:{
    accept:{
      type : String,
      default:()=>{
      // acceptVideo:'.MP4, .wmv, .AVI, .ASF 视频格式'
        return '.png, .jpeg, .gif, .jpg, .bmp, .webp' //图片格式
      },
    },
    fileList:{
      type : Array,
      default:()=>{
        return []
      },
    },
    disabled:{
      type : Boolean,
       default:()=>{
        return false
      },
    },
    limit:{
      type : Number,
      default:()=>{
        return 1
      }
    }
  },
  // setup(props,ctx){
  setup(props,{emit}){
    const ctx = getCurrentInstance();
    const _this = ctx.appContext.config.globalProperties
    const store = useStore();
    const router = useRouter();
    function onSuccess(response, file, fileList){
          console.log('上传成功');
          console.log(response);

          console.log(file);
          let index = file.name.indexOf('.')
          let imagetype = file.name.substring(index,file.name.length)
          console.log(imagetype);
          // return
           if (imagetype=='.docx' || imagetype=='.doc') {
             file.url = state.wordIcon
           }else if(imagetype=='.pdf'){
             file.url = state.pdfIcon
           }else if(imagetype=='.file'){
             file.url = state.fileIcon
           }else if(imagetype=='.img'){
             file.url = state.imageIcon
           }else if(imagetype=='.video'){
             file.url = state.videoIcon
           }else if(imagetype=='.zip'){
             file.url = state.zipIcon
           }

          // console.log(fileList);
          // state.uploadFileList = fileList
          // state.uploadFileList.forEach((item,index)=>{
          //    item.url = item.url.substring(5,item.url.length-1)
          // })
    };
    async function onRemove(file,fileList){
      console.log('文件删除');
      console.log(file);
      console.log(fileList);
      state.uploadFileList = fileList
      if(state.uploadFileList.length+1 == props.limit){
         setTimeout(()=>{
           state.hideUpload = false
         },1000)
      }

      // let url = file.url.substring(5,file.url.length)
      let url = file.url
      console.log(url);
       await _this.$request({
            url: "/api/common/del_upload",
            data: {
                url,
            },
        }).then(res=>{
        console.log(res);
            if(res.code==1){
                _this.$message.success('删除成功')
            }else{
                _this.$message.error('删除文件失败')
            }
        })

      console.log(fileList);
      // state.files = ''
      // fileList.forEach(item=>{
      //   state.files = state.files + item.response.data.attc_id + ','
      // });
      // state.files = state.files.substring(0,state.files.length-1)
      // console.log(state.files);
    };
    function onPreview(file){
      console.log(file);
      window.open(file.url)
    };
    // 文件上传时的钩子
    function onProgress(event, file, fileList){
      // if(fileList.length===props.limit){
      //   state.hideUpload = true
      // }
    };
    function beforeUpload(file){
      // 等于限制次数就隐藏按钮
      console.log(111);
      console.log(state.uploadFileList.length);
        // if(state.uploadFileList.length + 1 == props.limit){
        //   state.hideUpload = true
        // }else{
        //   state.hideUpload = false
        // }

    };
    onMounted(()=>{
       state.uploadFileList = props.fileList.length ? props.fileList : []
       // if( props.fileList.length === props.limit){
       //   state.hideUpload = true
       // }else{
       //   state.hideUpload = false
       // }
       // console.log(111);
       // console.log( props.limit);
       // console.log( props.fileList.length);
       // console.log(state.uploadFileList);
       // console.log( state.hideUpload);
    });
    return{
      state,props,
      handlePictureCardPreview,
      handleDownload,
      onSuccess,
      onRemove,
      onPreview,
      onProgress,
      beforeUpload
    }
  }
}
</script>
<style lang="scss" scoped>
  .hide {
    /deep/.el-upload--picture-card {
      		display: none;
    }
  }
/deep/ .el-upload-list__item{
  position: relative;
}
/deep/ .el-upload-list__item img {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;

}
/deep/ .el-upload-list__item-name{
  display: block;
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%,-50%);
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 150px;
  height: 150px;
  background: #E8EFFF;
  .text{
    display: block;
    width: 100%;
    height: 30px;
    // background: pink;
    margin-top: -25%;
  }
}
</style>
